<template>
    <div>
        <el-card class="box-card subject-tree">
            <el-tree :data="data"
                     :props="defaultProps"
                     default-expand-all
                     @node-click="handleNodeClick">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{data.name}}</span>
                    <span>
                          <el-button
                                  type="text"
                                  size="mini"
                                  @click.stop="() => openAddDialog(node,data)">
                            添加
                          </el-button>

                        <el-button
                                type="text"
                                size="mini"
                                @click.stop="() => openUpdateDialog(node,data)">
                            修改
                          </el-button>

                          <el-button
                                  type="text"
                                  size="mini"
                                  @click.stop="() => remove(node,data)">
                            删除
                          </el-button>
                     </span>
                </span>
            </el-tree>
        </el-card>

        <!--添加框-->
        <el-dialog
                title="添加科目"
                :visible.sync="addDialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-form :model="subjectForm" :rules="rules" ref="subjectForm" label-width="100px" >
                <el-form-item label="上级科目" prop="parentName">
                    <el-input v-model="subjectForm.parentName" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="子科目名称" prop="name">
                    <el-input v-model="subjectForm.name" ></el-input>
                </el-form-item>
                <el-form-item label="科目编码" prop="subject_code">
                    <el-input v-model="subjectForm.subject_code"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addData('subjectForm')">提交</el-button>
                    <el-button @click="cancel('subjectForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog
                title="修改科目"
                :visible.sync="updateDialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-form :model="updateForm" :rules="rules" ref="subjectForm" label-width="100px" >
                <el-form-item label="科目名称" prop="name">
                    <el-input v-model="updateForm.name" ></el-input>
                </el-form-item>
                <el-form-item label="科目编码" prop="subject_code">
                    <el-input v-model="updateForm.subject_code"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateData('subjectForm')">提交</el-button>
                    <el-button @click="cancel('subjectForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "SubjectBuild",
        data() {
            return {
                data: '',
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                subjectForm: {
                    parentName:'',
                    parent_id: '',
                    name:'',
                    subject_code:''
                },
                updateForm: {
                    id:'',
                    name:'',
                    subject_code:''
                },
                addDialogVisible:false,
                updateDialogVisible:false
            }
        },
        methods: {
            // 初始化科目树
            initSubject() {
                let that = this
                this.$http.post(this.$conf.baseURL + "/querySubjectTree",{id:1})
                    .then(function (res) {
                        that.data = []
                        that.data.push(res.data.data)
                    })
            },
            // 添加科目树对话框
            openAddDialog(node,data) {
                this.addDialogVisible = true
                this.subjectForm.parentName = data.name
                this.subjectForm.parent_id = data.id
            },
            //添加数据给后台
            addData(formName) {
                let that = this
                this.$http.post(this.$conf.baseURL + '/addSubject',this.subjectForm)
                    .then(function (res) {
                        that.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        that.initSubject()
                        that.$refs[formName].resetFields()
                        that.addDialogVisible = false
                    })
            },
            cancel(formName) {
                this.$refs[formName].resetFields()
                this.addDialogVisible = false
                this.updateDialogVisible=false
            },
            //删除节点信息
            remove(node,data) {
                let that = this
                this.$confirm('将删除该科目，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function() {
                    that.$http.post(that.$conf.baseURL + '/deleteSubjectById',{id:data.id})
                        .then(function (res) {
                            that.$message({
                                message:'删除成功',
                                type:'success'
                            })
                            that.initSubject()
                        })
                        .catch(function (res) {
                            that.$message({
                                message:'删除失败',
                                type:'error'
                            })
                        })
                })

            },
            //打开更新窗口
            openUpdateDialog(node,data) {
                this.updateDialogVisible = true
                this.updateForm=data
            },
            // 更新端口
            updateData(formName) {
                let that = this
                this.$http.post(this.$conf.baseURL + '/updateSubject',this.updateForm)
                    .then(function (res) {
                        that.$message({
                            message: '修改成功',
                            type:'success'
                        })
                        that.initSubject()
                        that.cancel(formName)
                    })
                    .catch(function (res) {
                        that.$message({
                            message: '修改失败',
                            type:'erroe'
                        })
                    })
            }
        },
        mounted() {
            this.initSubject()
        }
    }
</script>

<style scoped>
    .subject-tree {
        margin-top: 10px;
    }
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>
